<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery-3.7.1.min.js"></script>
    <script src="../js/bootstrap.bundle.js"></script>
    <title>轮播图</title></title>
    <style>
        .carousel-inner img{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="container-lg">
        <!-- 轮播图主体 -->
        <!-- .carousel轮播图主体类 -->
        <!-- .slide让轮播图可以滑动切换 -->
        <!-- id="cid"添加按钮方便后面使用id选择器来选择 -->
        <!-- data-interval="3000"控制轮播图切换的间隔时间，单位是毫秒 -->
        <!-- data-ride="carousel"让轮播图自动播放 -->
        <div class="carousel slide" id="cid" data-interval="3000" data-ride="carousel">
            <!-- ******************************************指示器******************************************** -->
            <!-- .carousel-indicators创建一个轮播图指示器  -->
            <ol class="carousel-indicators">
                <!-- data-target="#cid"用来指定轮播图主体div的id，注意这是一个id选择器，所以用#开头 -->
                <!-- data-slide-to="0"这些属性是用来让指示器被点击时跳转到指定索引的图片，索引从0开始 -->
                <!-- class="active"让轮播图默认展示的第一个指示器 -->
                <li data-target="#cid" data-slide-to="0" class="active"></li>
                <li data-target="#cid" data-slide-to="1"></li>
                <li data-target="#cid" data-slide-to="2"></li>
                <li data-target="#cid" data-slide-to="3"></li>
                <li data-target="#cid" data-slide-to="4"></li>
                <li data-target="#cid" data-slide-to="5"></li>
                <li data-target="#cid" data-slide-to="6"></li>
            </ol>
            <!-- ******************************************轮播图放图片的部分*************************************************** -->
            <!-- .carousel-inner用来装轮播图所有的图片 -->
            <div class="carousel-inner">
                <!-- .carousel-item轮播图每张图片的容器 -->
                <!-- .active默认显示的图片 -->
                <!-- 注意，如果没有这个active轮播将无法显示 -->
                <div class="carousel-item active">
                    <img src="../images/mi2.jpg" class="img-fluid">
                    <!-- .carousel-caption用于样式化轮播图上的标题或者说明文字 -->
                    <!-- d-none表示默认情况下不占用位置 -->
                    <!-- d-md-block让文字在中型屏幕以上显示为块元素 -->
                    <div class="carousel-caption d-none d-md-block">
                        <h1>一级标题</h1>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="../images/mi2.jpg" class="img-fluid">
                </div>
                <div class="carousel-item">
                    <img src="../images/mi3.jpg" class="img-fluid">
                </div>
                <div class="carousel-item">
                    <img src="../images/mi4.jpg" class="img-fluid">
                </div>
                <div class="carousel-item">
                    <img src="../images/mi5.jpg" class="img-fluid">
                </div>
                <div class="carousel-item">
                    <img src="../images/mi6.jpg" class="img-fluid">
                </div>
                <div class="carousel-item">
                    <img src="../images/mi7.jpg" class="img-fluid">
                </div>
            </div>
 <!-- ******************************************轮播图控制按钮*************************************************** -->
 <!-- .carousel-control-prev样式化向前滚动的按钮 -->
 <!-- data-slide="prev"用于让按钮被点击的时候切换到前一张图片 -->
            <a href="#cid" class="carousel-control-prev" data-slide="prev">
                <!-- .carousel-control-prev-icon给按钮添加一个向前指的图标 -->
                <span class="carousel-control-prev-icon"></span>
            </a>
            <a href="#cid" class="carousel-control-next" data-slide="next">
                <span class="carousel-control-next-icon"></span>
            </a>
        </div>
    </div>
    
</body>
</html>